<style lang="scss" scoped>
	.content {
		width: 100%;
		background-color: white;
		padding: 30rpx 0;
	}

	.list {
		padding: 25rpx;
		border-bottom: 1px solid #ccc;
		align-items: flex-start;
		color: #737373;

		.red {
			transform: translateY(6rpx);
		}

		.textarea {
			width: 460rpx;
			height: 120rpx;
			font-size: 28rpx;
		}

		.mic {
			height: 120rpx;
			width: 80rpx;
			border-left: 1px solid #ccc;
			padding-left: 20rpx;
		}

		.ipt {
			width: 550rpx;
		}

		.uploadfile {
			width: 550rpx;

			.btns {
				width: 100%;

				.btn {
					width: 152rpx;
					height: 64rpx;

					border: 2rpx solid #bfbfbf;
					border-radius: 34rpx;
				}
			}
		}

		.record {
			width: 550rpx;
		}
	}


	.slot-modal {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin: 60rpx 0;

	}

	.state-text {
		font-weight: 400;
		font-size: 28rpx;
		color: #0F2E4D;
		margin-top: 22rpx;
		align-items: center;
	}

	.row {
		display: block;
		margin: 30rpx 0;
	}

	.scroll-Y {
		height: 800rpx
	}
</style>

<template>
	<view class="content">
		<u-modal :negative-top="600" v-model="showModal" :show-title="false" :title-style="{color: 'red'}"
			:show-confirm-button="false" :show-cancel-button="false">
			<view class="slot-modal">

				<u-image width="128rpx" height="128rpx" src="/static/images/complate.png" shape="circle"></u-image>
				<view class="state-text">

					已完成
				</view>
			</view>
			<u-row class="row" gutter="30">
				<u-col span="6">
					<u-button type="default" :custom-stye="buttonStyleBase" shape="circle" @click="onAfterEvaluation">
						稍后评价</u-button>

				</u-col>
				<u-col span="6">
					<u-button type="parimary" :custom-style="buttonStyle" shape="circle" :hair-line="false"
						@click="onEvaluation">立即评价</u-button>

				</u-col>
			</u-row>
		</u-modal>
		<view class="f34 bold" style="padding:0 30rpx;border-bottom: 1px solid #ccc;padding-bottom: 20rpx;">完成</view>

		<scroll-view scroll-y="true" class="scroll-Y u-padding-30">


			<evan-form :model="formData" ref="form">
				<evan-form-item label="实际报修地址" prop="actualRepairPlace">
					<ItemRow v-model="formData.actualRepairPlace" ref="actualRepairPlace"
						chooseType="select-department">
					</ItemRow>
				</evan-form-item>
				<evan-form-item label="实际故障分类" prop="faultType">
					<ItemRow v-model="formData.faultType" dicKey="faultClassification" chooseType="select-dic-cascader">
					</ItemRow>
				</evan-form-item>
				<evan-form-item label="实际故障" prop="faultRemark">
					<u-input input-align="right" type="textarea" v-model="formData.faultRemark" placeholder="请填写实际故障" />
				</evan-form-item>
				<evan-form-item label="解决办法" prop="makeWay">
					<u-input input-align="right" type="textarea" v-model="formData.makeWay" placeholder="请填写解决办法" />

				</evan-form-item>

				<evan-form-item   label="实际工时(小时)" prop="realTime">
					<input v-model="formData.realTime" placeholder-style="color:#98A5B3" type="digit"
						placeholder="请输入预计工时(单位:小时)" />
				</evan-form-item>

				<evan-form-item label="资产名称">
					<u-input input-align="right" type="textarea" v-model="formData.equipment" placeholder="请填写资产名称" />
				</evan-form-item>
				<evan-form-item label="资产位置">
					<ItemRow v-model="formData.equipmentAddressId" ref="department" chooseType="select-department">
					</ItemRow>
				</evan-form-item>
				<evan-form-item label="附件">
					<HPhotoButton @photo="onPhoto"></HPhotoButton>
					<HUploadButton @upload="onUpload"></HUploadButton>
				</evan-form-item>
				<view class="p-top10 between-flex" v-for="item,index in formData.enclosure" :key="index">
					<view class="align-flex blue" @click="$open(item.url)">
						<u-icon name="file-text" color="#409EFF" size="38"></u-icon>
						{{item.fileName.substring(item.fileName.length-10)}}
					</view>
					<u-icon @click="delfile(index)" name="close" color="#666666" size="30"></u-icon>
				</view>
			</evan-form>
		</scroll-view>
		<view class="lbtn" @click="submit">完成</view>
	</view>
</template>

<script>
	import ItemRow from '@/components/arrow/itemArrow.vue'
	import PagesCourseRouterConfig from '@/pagesCourse/routerConfig.js'
	import PagesEvaluationRouterConfig from '@/pagesEvaluation/routerConfig.js'
	let Base64 = require('@/common/base64.js')
	import {
		attachmentFormatter
	} from '@/common/submitFormatter.js'
	import HButton from '@/components/button/index.vue'
	import HPhotoButton from '@/components/button/photo.vue'
	import HUploadButton from '@/components/button/upload.vue'
import { workOrderComplete } from '../../apis/workOrder'
	export default {
		components: {
			HButton,
			HPhotoButton,
			HUploadButton,
			ItemRow
		},
		props: {
			orderNum: {
				default: ''
			},
			info: {
				default: {}
			},
			isReview: Boolean,
			data: {
				default: {}
			}
		},

		data() {
			return {
				rules: {
					faultType: [{
						required: true,
						message: '请选择故障分类',
					}],
					faultRemark: [{
						required: true,
						message: '请填写实际故障',
					}],
					realTime: [{
						required: true,
						message: '请填写实际工时',
					}]
				},
				formData: {
					orderNum: '',
					faultType: '',
					faultRemark: "",
					makeWay: '',
					processEnclosure: '',
					realTime: '',
					actualRepairPlace: '',
					equipment: '',
					equipmentAddressId: '',
					equipmentAddress: '',
					enclosure: [],

				},
				PagesCourseRouterConfig,
				showModal: false,

				buttonStyleBase: {
					fontWeight: 600,
					fontSize: '32rpx',
				},
				buttonStyle: {
					backgroundColor: '#409EFF',
					color: '#fff',
					...this.buttonStyleBase
				},
			}
		},
		created() {

		},

		watch: {


			info: {
				handler: function(nv, ov) {
					
					this.formData = nv
					this.formData.faultRemark = this.$options.filters.deleteHTMLTag(nv.faultRemark)
					this.formData.enclosure = nv.enclosure || []
					this.formData.orderNum = this.orderNum
					console.log(this.formData, 'this.formData');
				},
				deep: true,
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.$refs.form.setRules(this.rules)
			})
		},
		methods: {
			/**
			 * 立即评价
			 */
			onEvaluation() {
				wx.navigateTo({
					url: `${PagesEvaluationRouterConfig.index}?orderNum=${this.orderNum}&reporter=${this.data.user || ''}`
				})
			},
			/**
			 * 稍后评价
			 */
			onAfterEvaluation() {
				this.showModal = false;
				wx.redirectTo({
					url: '/pages/myOrder/order'
				})
			},
			delfile(index) {
				this.formData.enclosure.splice(index, 1)
			},

			//选择图片
			 onPhoto(res) {
				const {
					file
				} = res; 
				this.formData.enclosure.push(file)
			},
			 onUpload(res) {
				const {
					file
				} = res;
				this.formData.enclosure.push(file)
			},
			submit() {
					this.$refs['form'].validate(async (valid) => {
						if (valid) {
						 uni.showLoading({
						 	title: '提交中...',
						 	mask: true
						 }) 
						 const data = {
							 ...this.formData,
							  makeWay:Base64.encode(this.formData.makeWay),
							  processEnclosure: attachmentFormatter( this.formData.enclosure)
						 } 
						 
							await workOrderComplete(data)
	
							uni.hideLoading()
							// 需要审核 不显示评价弹窗
							//如果需要评价.显示评价操作弹窗
							if (this.isReview) {
								wx.redirectTo({
									url: '/pages/myOrder/order'
								})
							} else {
								this.showModal = true
							}
							
						}
					}) 
			},

		}
	}
</script>
